<template>
  <div id="BasicBar" style="width: 100%; height: 600px ;float:left" />
</template>

<script>
import { getAllFaultType } from '@/api/bar'
import echarts from 'echarts'

export default {
  name: 'BasicBar',
  data() {
    return {
      myChart: ''
    }
  },
  mounted() {
    this.initData()
    this.drawCharts()
  },
  methods: {
    drawChart() {
      // 基于准备好的dom，初始化echarts实例  这个和上面的main对应
      this.myChart = this.$echarts.init(document.getElementById('BasicBar'))
      // 指定图表的配置项和数据
      this.myChart.setOption({
        title: {
          text: '故障类别柱状图',
          left: 'center'
        },
        xAxis: {
          data: [],
          axisLabel: {
            inside: true,
            color: '#fff'
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          z: 10
        },
        yAxis: {
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#999'
          }
        },
        dataZoom: [
          {
            type: 'inside'
          }
        ],
        series: [
          {
            type: 'bar',
            showBackground: false,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#83bff6' },
                { offset: 0.5, color: '#188df0' },
                { offset: 1, color: '#188df0' }
              ])
            },
            emphasis: {
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#2378f7' },
                  { offset: 0.7, color: '#2378f7' },
                  { offset: 1, color: '#83bff6' }
                ])
              }
            },
            data: []
          }
        ]
      })
    },
    initData() {
      getAllFaultType().then(({ data }) => {
        this.myChart.setOption({
          xAxis: {
            data: data.dataAxis
          },
          series: [{
            data: data.data
          }]
        })
      })
    },
    drawCharts() {
      this.drawChart()
    }
  }
}
</script>

<style scoped>

</style>
